<template>
  <view class="loading-container" v-if="visible">
    <view class="loading-mask" v-if="mask"></view>
    <view class="loading-content">
      <view class="loading-spinner">
        <view class="spinner-item" v-for="i in 12" :key="i" :class="'spinner-item-' + i"></view>
      </view>
      <text class="loading-text" v-if="text">{{ text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'LoadingComponent',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: '加载中...'
    },
    mask: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style scoped>
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 20rpx;
  padding: 40rpx;
  min-width: 200rpx;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  position: relative;
}

.spinner-item {
  position: absolute;
  width: 4rpx;
  height: 16rpx;
  background-color: #ffffff;
  border-radius: 2rpx;
  animation: spinner-fade 1.2s linear infinite;
}

.spinner-item-1 { top: 2rpx; left: 28rpx; transform: rotate(0deg); animation-delay: 0s; }
.spinner-item-2 { top: 6rpx; left: 42rpx; transform: rotate(30deg); animation-delay: -0.1s; }
.spinner-item-3 { top: 18rpx; left: 50rpx; transform: rotate(60deg); animation-delay: -0.2s; }
.spinner-item-4 { top: 30rpx; left: 42rpx; transform: rotate(90deg); animation-delay: -0.3s; }
.spinner-item-5 { top: 42rpx; left: 28rpx; transform: rotate(120deg); animation-delay: -0.4s; }
.spinner-item-6 { top: 50rpx; left: 18rpx; transform: rotate(150deg); animation-delay: -0.5s; }
.spinner-item-7 { top: 42rpx; left: 6rpx; transform: rotate(180deg); animation-delay: -0.6s; }
.spinner-item-8 { top: 30rpx; left: 2rpx; transform: rotate(210deg); animation-delay: -0.7s; }
.spinner-item-9 { top: 18rpx; left: 10rpx; transform: rotate(240deg); animation-delay: -0.8s; }
.spinner-item-10 { top: 6rpx; left: 18rpx; transform: rotate(270deg); animation-delay: -0.9s; }
.spinner-item-11 { top: 2rpx; left: 28rpx; transform: rotate(300deg); animation-delay: -1s; }
.spinner-item-12 { top: 6rpx; left: 42rpx; transform: rotate(330deg); animation-delay: -1.1s; }

@keyframes spinner-fade {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

.loading-text {
  color: #ffffff;
  font-size: 28rpx;
  margin-top: 20rpx;
}
</style> 